<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>AJAX实例</title>
		<style type="text/css">
			div{
				width: 300px;
				border: 1px solid black;
				margin-top: 30px;
			}
		</style>	
	</head>
	<body>    
	    <input type = "button" value = "更新div2中的数据" onclick = "ajaxFunc()">
	    <div id="myDiv1">这是第一个div，这里的内容不会改变</div>
	    <div id="myDiv2">这是第二个div，这里的内容会改变</div>
	</body>
	<script>   
		function ajaxFunc(){
		    //1、创建XMLHttpRequest对象
			var xhr;  
			if(window.ActiveXObject){ // IE浏览器的创建方式
		        xhr=new ActiveXObject("Microsoft.XMLHTTP");
		    }else if(window.XMLHttpRequest){ // Netscape浏览器中的创建方式
		        xhr=new XMLHttpRequest();
		    }    
		    //2、创建http请求
		    xhr.open("GET","data.html",true); 
		    //3、发送请求
			xhr.send(); 
			//4、设置响应http请求状态变化的事件
			xhr.onreadystatechange=function(){ 
		        // 判断异步调用是否成功,若成功开始局部更新数据
				if(xhr.readyState==4&&xhr.status==200){ 
					//获得从服务器端返回的数据,并局部刷新页面
					document.getElementById("myDiv2").innerHTML=xhr.responseText; 
				}
			}		
		}
	</script>
</html>